<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
  src="https://code.jquery.com/jquery-3.6.1.js"
  integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
  crossorigin="anonymous"></script>
    <title>Document</title>
    <style>
        .da_top ul li{
            float: left;
            list-style: none;
            padding: 20px;
            font-size: 20px;
            border: 1px solid pink;
        }
        .da_top ul li:hover{
            background: red;
        }
        .da_bot{
            position: absolute;
            left: 48px;
            width: 727px;
            border: 1px solid pink;
        }
        .item{
            display: none;
        }
        .clf{

            clear: both;

}
    </style>
</head>
<body>
    <div class="da">
        <div class="da_top">
            <ul>
                <li>商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
            
        </div>
        <div class="clf"></div>
        <div class="da_bot">
              <div class="item" style="display:block">我是商品介绍</div>
              <div class="item">我是规格与包装</div>
              <div class="item">我是售后保障</div>
              <div class="item">我是商品评价（50000）</div>
              <div class="item">我是手机社区</div>
        </div>
    </div>
    <script>
        $(function(){
            $(".da_top li").click(function(){
                // 链式编程操作
                // $(this).addClass("current").siblings.removeClass("current")
                var index = $(this).index()
                console.log(index)
                $(".da_bot .item").eq(index).show().siblings().hide()
            })
        })
    </script>
</body>
</html>